<template>
  <div class="acticle center-wrapper">
    <section class="filter-ranking">
      <div class="tabs" v-for="(itemTab, Iindex) in tabs" :key="Iindex">
        <filterRanking :tabs="itemTab" @select="getTabs"></filterRanking>
      </div>
    </section>
    <section class="article-list">
      <a
        class="article-item"
        v-for="(itemArticle, Aindex) in articleList"
        :key="Aindex"
        :href="itemArticle.url"
        @click="goDetail(itemArticle)"
        @mouseenter="seeReply(itemArticle)"
      >
        <articleCrad :article="itemArticle" :file_id="file_id"></articleCrad>
      </a>
      <div class="example-pagination-block" v-if="searchOptions.pageTotal">
        <el-pagination
          :page-size="searchOptions.pageSize"
          :pager-count="5"
          layout="prev, pager, next"
          :total="searchOptions.pageTotal"
          background
          @current-change="handleCurrentChange"
        />
      </div>
    </section>
    <section class="article-profile">
      <Transition name="fade">
        <template v-if="isShowProfile">
          <articleProfile
            :profile="profileData"
            @like="fileLike"
            @refresh="refresh"
            ref="articleProfileRef"
          >
            <template #head>
              <el-image
                :src="
                  profileData?.image_url
                    ? profileData?.image_url
                    : loadAssetsURL('default/default_article.png')
                "
                class="headImage"
                fit="cover"
              >
                <template #error>
                  <div class="image-slot">
                    <img :src="loadAssetsURL('default/default_article.png')" alt="" />
                  </div> </template
              ></el-image>
            </template>
          </articleProfile>
        </template>
      </Transition>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import filterRanking from './components/filter-ranking/Filter-Ranking.vue'
import articleCrad from './components/article-card/Article-Card.vue'
import articleProfile from './components/article-profile/Article-Profile.vue'
import { loadAssetsURL } from '@/utils/load-assets'
import { useRoute, useRouter } from 'vue-router'
import { getSelectListApi, getPreSelectListApi, displayApi, fileLikeApi } from '@/service/api'
import { iscode } from '@/utils'
import useArticleStore from '@/stores/article/article'
import useTopbarStore from '@/stores/topbar/topbar'
import { onMounted } from 'vue'
const articleProfileRef = ref<InstanceType<typeof articleProfile>>()
const articleStore = useArticleStore()
const router = useRouter()
const route = useRoute()
const topbarStore = useTopbarStore()
//左边筛选选择
const tabs = ref<any>([])
const getTabs = (payload: any) => {
  if (payload.title == 'labelNames') {
    searchOptions.value.label_id = payload.id
  } else {
    searchOptions.value.id = payload.id
  }
  getSelectList()
}

//中间文章列表
const articleList = ref<any>([])

//右边回复
const profileData = ref<any>({})

const isShowProfile = ref<boolean>(false)

const goDetail = (itemArticle: any) => {
  router.push({ path: '/article-detail', query: { articleId: itemArticle.id } })
}

let intervalId: any = ''
const seeReply = (itemArticle: any) => {
  let time = 0
  if (intervalId) {
    clearInterval(intervalId)
  }
  intervalId = setInterval(() => {
    if (time <= 5) {
      time++
    } else {
      if (!articleStore.focusInput) {
        if (file_id.value !== itemArticle.id) {
          file_id.value = itemArticle.id
          displayArticle()
        }
      }
      clearInterval(intervalId)
    }
  }, 100)
}

const searchOptions = ref<any>({
  pageNum: 1,
  pageSize: 10,
  pageTotal: 0,
  id: '',
  label_id: '',
  title: ''
})

//当前文章id
const file_id = ref<string | number>(-1)

//文章点赞
const fileLike = async () => {
  let res = await fileLikeApi({ id: file_id.value })
  if (iscode(res)) {
    refresh()
  }
}
//分页
const handleCurrentChange = (val: number) => {
  searchOptions.value.pageNum = val
  getSelectList()
}

//获取文章列表
const getSelectList = async () => {
  let res = await getSelectListApi(searchOptions.value)
  if (iscode(res)) {
    articleList.value = res.result.list
    searchOptions.value.pageTotal = res.result.count
    if (articleList.value.length) {
      file_id.value = articleList.value[0].id
      articleList.value.map((item: any) => {
        item.url = window.location.origin + '/#/article-detail?articleId=' + item.id
      })
      displayArticle()
    }
  }
}

//获取筛选列表
const preSelectList = async () => {
  let res = await getPreSelectListApi()
  if (iscode(res)) {
    tabs.value = res.result
    tabs.value.map((item: any) => {
      item.currentSelect = -1
    })
  }
}

//获取文章详情
const displayArticle = async () => {
  isShowProfile.value = false
  let res = await displayApi({ file_id: file_id.value, display_state: 1 })
  if (iscode(res)) {
    profileData.value = res.result
    profileData.value.file_id = file_id.value
    isShowProfile.value = true
  }
}

const refresh = async () => {
  let res = await getSelectListApi(searchOptions.value)
  if (iscode(res)) {
    articleList.value = res.result.list
    searchOptions.value.pageTotal = res.result.count
    displayArticle()
  }
}

onMounted(() => {
  watch(
    () => topbarStore.searchRes.searchMore,
    (newVal, oldVal) => {
      if (newVal) {
        searchOptions.value.title = newVal
        searchOptions.value.id = ''
        searchOptions.value.label_id = ''
        tabs.value?.map((item: any) => {
          item.currentSelect = -1
        })
        getSelectList()
      }
    }
  )
})

const init = () => {
  getSelectList()
  preSelectList()
}
init()
</script>

<style lang="less" scoped>
.acticle {
  display: flex;
  justify-content: space-between;
  margin: 53px auto;
  .filter-ranking {
    min-width: 141px;
  }
  .tabs:nth-child(2) {
    margin-top: 47px;
  }
  .article-item {
    display: block;
    margin-top: 32px;
  }
  .article-item:first-child {
    margin-top: 0;
  }
  .example-pagination-block {
    margin-top: 80px;
    .el-pagination {
      margin: 0 auto;
      width: fit-content;
    }
  }
  .article-profile {
    .headImage {
      border-radius: 7px 7px 7px 7px;
      margin-bottom: 30px;
      height: 205px;
      width: -webkit-fill-available;
    }
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: all 1s ease;
  }
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
}
</style>
